<div class="p-[20px]">
  <header class="flex justify-between">
    <div class="mb-[15px] flex">
      <b class="mr-[14px] text-[18px] truncate max-w-[500px]" i18n>{{ title }}</b>
    </div>
    <div class="flex">
      <button *ngIf="feature.config.cloudFeature" class="!ml-[10px]" eo-ng-button (click)="invite()">
        <eo-iconpark-icon class="mr-[5px]" name="add"></eo-iconpark-icon>
        <span i18n>Invite Member</span>
      </button>
      <button class="!ml-[10px]" eo-ng-button nzType="primary" (click)="eoProjectList.createProject()">
        <eo-iconpark-icon class="mr-[5px]" name="add"></eo-iconpark-icon>
        <span i18n>New Project</span>
      </button>
    </div>
  </header>
  <section>
    <eo-ng-tabset class="mx-[5px]" [(nzSelectedIndex)]="nzSelectedIndex" [nzTabBarExtraContent]="extraTemplate">
      <eo-ng-tab i18n-nzTitle nzTitle="Project">
        <eo-project-list #eoProjectList></eo-project-list>
      </eo-ng-tab>
      <eo-ng-tab i18n-nzTitle nzTitle="Members" *ngIf="feature.config.cloudFeature">
        <div class="half-part-container">
          <eo-ng-feedback-alert
            *ngIf="store.isLocal"
            class="block mb-[20px]"
            nzType="info"
            [nzMessage]="templateRefMsg"
            nzShowIcon
          ></eo-ng-feedback-alert>
          <ng-template #templateRefMsg>
            <p i18n>Currently using local workspace, unable to invite members. </p>
            <p class="flex items-center" i18n
              >You can<button eo-ng-button nzType="default" class="mx-[5px]" nzSize="small" (click)="createWorkspace()"
                >create a cloud workspace</button
              >and invite members to collaborate.</p
            ></ng-template
          >
          <eo-workspace-member *ngIf="nzSelectedIndex === 1"></eo-workspace-member>
        </div>
      </eo-ng-tab>
      <eo-ng-tab i18n-nzTitle *ngIf="!store.isLocal && isOwner" nzTitle="Setting">
        <eo-workspace-setting class="half-part-container"></eo-workspace-setting>
      </eo-ng-tab>
    </eo-ng-tabset>
    <ng-template #extraTemplate>
      <div class="list-type-switcher" *ngIf="nzSelectedIndex === 0">
        <button eo-ng-button nzType="text" (click)="eoProjectList.setListType('card')">
          <eo-iconpark-icon [ngClass]="{ active: eoProjectList.listType === 'card' }" name="page-template"></eo-iconpark-icon>
        </button>
        <button eo-ng-button nzType="text" (click)="eoProjectList.setListType('list')">
          <eo-iconpark-icon [ngClass]="{ active: eoProjectList.listType === 'list' }" name="list"></eo-iconpark-icon>
        </button>
      </div>
    </ng-template>
  </section>
</div>
